<!DOCTYPE HTML>
<html>
<head>
    <title>Qing</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <!--[if lte IE 8]><script src="${base.contextPath}/css/ie/html5shiv.js"></script><![endif]-->
    <script>
        var base='${base.contextPath}'
    </script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css">
    <link rel="stylesheet" href="${base.contextPath}/css/skel.css" />
    <link rel="stylesheet" href="${base.contextPath}/css/style.css" />
    <link rel="stylesheet" href="${base.contextPath}/css/style-wide.css" />
<link rel="stylesheet" href="${base.contextPath}/css/ie/v8.css" />
</head>
<body>

<!-- Header -->
<div id="header">
    <span class="logo icon fa-paper-plane-o"></span>
    <h1>这是我的第一个网站</h1>
    <p>来自${(address)!'中国'}的朋友你好<br />
        请给我多提建议，可以给我发邮件 <a href="#from">1310811431@qq.com</a>.</p>
</div>

<!-- Main -->
<div id="main">

    <header class="major container small">
        <h2>
            我如果爱你<br />
            绝不像攀援的凌霄花，<br />
            借你的高枝炫耀自己；<br />
            我如果爱你<br />
            绝不像痴情的鸟儿<br />
            为绿荫重复单调的歌曲；<br />
            也不止像泉源<br />
            长年送来清凉的慰藉；<br />
            也不止像险峰增加你的高度，衬托你的威仪。<br />
            甚至日光。<br />
            甚至春雨。<br />
        </h2>
    </header>

    <div class="box alt container">
        <section class="feature left">
            <a href="${base.contextPath}/bing" class="image icon fa-signal"><img src="${base.contextPath}/images/pic01.jpg" alt="" /></a>
            <div class="content">
                <h3>第一个Demo</h3>
                <p>l don't talk to you anymore  it's because you make me feel like  l was bothering  you!</p>
            </div>
        </section>
        <section class="feature right">
            <a href="${base.contextPath}/build" class="image icon fa-code"><img src="${base.contextPath}/images/pic02.jpg" alt="" /></a>
            <div class="content">
                <h3>建设中...</h3>
                <p>Vitae natoque dictum etiam semper magnis enim feugiat amet curabitur tempor orci penatibus. Tellus erat mauris ipsum fermentum etiam vivamus eget. Nunc nibh morbi quis fusce lacus.</p>
            </div>
        </section>
        <section class="feature left">
            <a href="${base.contextPath}/build" class="image icon fa-mobile"><img src="${base.contextPath}/images/pic03.jpg" alt="" /></a>
            <div class="content">
                <h3>建设中...</h3>
                <p>Vitae natoque dictum etiam semper magnis enim feugiat amet curabitur tempor orci penatibus. Tellus erat mauris ipsum fermentum etiam vivamus eget. Nunc nibh morbi quis fusce lacus.</p>
            </div>
        </section>
    </div>

    <footer class="major container small">
        <h3>Get shady with science</h3>
        <p>Vitae natoque dictum etiam semper magnis enim feugiat amet curabitur tempor orci penatibus. Tellus erat mauris ipsum fermentum etiam vivamus.</p>
        <ul class="actions">
            <li><a href="#" class="button">Join our crew</a></li>
        </ul>
    </footer>

</div>

<!-- Footer -->
<div id="footer">
    <div class="container small">

        <header class="major last">
            <h2>Questions or comments?</h2>
        </header>

        <p>请提出你对我建站有用的宝贵意见..</p>

        <form id="sub-form">
            <a name="from"></a>
            <div class="row collapse-at-2">
                <div class="6u">
                    <input id="name" type="text" name="name" placeholder="姓名" maxlength="12" />
                </div>
                <div class="6u">
                    <input id="email" type="email" name="email" placeholder="邮箱" maxlength="20"/>
                </div>
            </div>
            <div class="row">
                <div class="12u">
                    <textarea name="message" placeholder="建议" rows="6"></textarea>
                </div>
            </div>
            <div class="row">
                <div class="12u">
                    <ul class="actions">
                        <li><input id="sub" type="button" value="提交" /></li>
                    </ul>
                </div>
            </div>
        </form>

        <ul class="icons">
            <li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
            <li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
            <li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
            <li><a href="#" class="icon fa-github"><span class="label">Github</span></a></li>
            <li><a href="#" class="icon fa-dribbble"><span class="label">Dribbble</span></a></li>
        </ul>

        <ul class="copyright">
            <li>Copyright &copy; 2018.Qing  All rights reserved.<a  href="${base.contextPath}">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></li>
        </ul>

    </div>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>
<script src="${base.contextPath}/js/skel.min.js"></script>
<script src="${base.contextPath}/js/init.js"></script>
<script>
    $(function () {
        $('#sub').click(function () {
            if ($('#name').val()==''){
                $.alert("嘿，你的名字呢？");
                return false;
            }
            if ($('#email').val()==''){
                $.alert("亲，好歹给个邮箱呗!");
                return false;
            }
            var data=$('#sub-form').serialize();
            $(".sub").prop("disabled",true);
            $.ajax({
                url: '${root}/message' ,
                type: 'POST',
                dataType: 'JSON',
                data: data,
                success: function (res) {
                    $("#sub").prop("disabled",false)
                    if (res.code === 12000) {
                        $.alert("谢谢你的建议！");
                    } else {
                        $.alert("额，好像出错了！！");
                    }
                },
                error: function () {
                    $("#sub").prop("disabled",false)
                        $.alert("额，好像出错了！！");
                }
            })
        })

    })

</script>
</html>